<template>


    <div style="height:100%">
        <div style="padding:30px;">
            <el-button type="primary">
                <router-link to="suboneadd" tag="span">添加题目</router-link>
            </el-button>
            <br>
            <br>

            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="标题">
                        <el-input v-model="formInline.title" placeholder="搜索标题"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="formInline.chapters_id" placeholder="分类">
                            <div v-for="chapter in chapters" :key="chapter.id">
                                <el-option v-bind:label="chapter.name" v-bind:value="chapter.id"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="question"
                        label="标题"
                        width="350">
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="keywords"-->
                        <!--label="关键字"-->
                        <!--width="70">-->
                <!--</el-table-column>-->
                <el-table-column

                        label="题目类型"
                        width="100">
                    <template slot-scope="scope">
                        <span v-for="lists in scope.row.cate">{{lists.name}} </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="chapters.name"
                        label="章节分类"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="图片"
                        width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.image.url" alt="" style="width: 50px;height: 50px">
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="item1"-->
                        <!--label="选项一"-->
                        <!--width="120">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="item2"-->
                        <!--label="选项二"-->
                        <!--width="120">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="item3"-->
                        <!--label="选项三"-->
                        <!--width="120">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="item4"-->
                        <!--label="选项四"-->
                        <!--width="120">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="answer"-->
                        <!--label="正确答案"-->
                        <!--width="120">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="explains"-->
                        <!--label="官方解释"-->
                        <!--width="300">-->
                <!--</el-table-column>-->
                <el-table-column
                        label="是否为争议题"
                        width="140">
                    <template slot-scope="scope">
                        <center>
                            <el-switch
                                    @change="hand(scope.row.is_zy,scope.row.id)"
                                    v-model="scope.row.is_zy"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </center>
                    </template>
                </el-table-column>
                <el-table-column

                        label="是否为易错题"
                        width="140">
                    <template slot-scope="scope">
                        <center>
                            <el-switch
                                    @change="ycthand(scope.row.is_yct,scope.row.id)"
                                    v-model="scope.row.is_yct"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </center>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <router-link :to="{name:'subonesave',params:{id:scope.row.id}}">修改</router-link>
                    </template>
                </el-table-column>
            </el-table>

            <br>
            <el-pagination
                    background
                    :page-size="30"
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        mounted() {
            //当前页码数
            let  page={
                page: this.currentPage
            }
            //请求当前页码数据
            axios.post('subone/getlist', page).then(rew => {
                //表格的数据赋值
                this.tableData = rew.data.data
                //页码数据赋值
                this.total = rew.data.total
            })

            //章节分类
            axios.post('/admin/getchapters').then(rew=>{
                this.chapters =  rew.data
            })
        },
        methods: {
            onSubmit() {

                //搜索对应题目
                //章节分类
                axios.post('/api/SubOneSearch',this.formInline).then(rew=>{
                    //表格的数据赋值
                    this.tableData = rew.data.data
                    //页码数据赋值
                    this.total = rew.data.total
                })
            },
            handleClick(row) {
                this.$confirm('是否删除该题目?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('subone/delsid', row).then(rew => {
                        var index = this.tableData.indexOf(row)
                        this.tableData.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange(currentPage) {
                let  page={
                    page: currentPage
                }
                axios.post('subone/getlist', page).then(rew => {
                    this.tableData = rew.data.data
                    this.total = rew.data.total
                })
            },
            hand(val, id) {
                let data = {
                    is_zy: val,
                    id: id
                }
                axios.post('/zy', data).then(rew => {
                })
            },
            ycthand(val, id) {
                let data = {
                    is_yct: val,
                    id: id
                }
                axios.post('/yc', data).then(rew => {

                })
            }
        },
        data() {
            return {
                chapters:'',
                tableData: [],
                currentPage: 1,
                total:0,
                formInline: {
                    title: '',
                    chapters_id: ''
                }
            }
        }
    }
</script>
<style scoped>

</style>